    const imgs = [{
    s:"./imgs/xiangqingye/1.png",
    m:"./imgs/xiangqingye/smell1.png",
    l:"./imgs/xiangqingye/big1.png",
    },{
    s:"./imgs/xiangqingye/2.png",
    m:"./imgs/xiangqingye/smell2.png",
    l:"./imgs/xiangqingye/big2.png",
    },{
    },{
    s:"./imgs/xiangqingye/3.png",
    m:"./imgs/xiangqingye/smell2.png",
    l:"./imgs/xiangqingye/big2.png",
    },{
    s:"./imgs/xiangqingye/3.png",
    m:"./imgs/xiangqingye/xiao3.png",
    l:"./imgs/xiangqingye/da3.png",
    }];

    // 点击小图切换中图和大图
    function Tab(){
    this.li = document.querySelectorAll(".cont li");
    this.sImg = document.querySelector(".small_box img");
    this.bImg = document.querySelector(".big_box img");
    this.data = imgs;
    this.index = 0;
    this.addEvent();
    }
    Tab.prototype.addEvent = function(){
    const that = this;
    for(let i=0;i<this.li.length;i++){
        this.li[i].xuhao = i;
        this.li[i].onclick = function(){
            that.hide();
            that.getIndex(this);
        }
    }
    }
    Tab.prototype.hide = function(){
    this.li[this.index].className = "";
    }
    Tab.prototype.getIndex = function(now){
    this.index = now.xuhao;
    this.show();
    }
    Tab.prototype.show = function(){
    this.li[this.index].className = "active";
    this.sImg.src = this.data[this.index].m;
    this.bImg.src = this.data[this.index].l;
    }
    new Tab();

    // 放大镜功能
    class Magnifier{
    constructor(){
        this.sBox = document.querySelector(".small_box");
        this.sSpan = document.querySelector(".small_box span");
        this.bBox = document.querySelector(".big_box");
        this.bImg = document.querySelector(".big_box img");
        this.addEvent();
    }
    move(ops){
        let l = ops.x - this.sSpan.offsetWidth/2;
        let t = ops.y - this.sSpan.offsetHeight/2;
        if(l < 0) l = 0;
        if(t < 0) t = 0;
        if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
            l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
        }
        if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
            t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
        }
        this.sSpan.style.left = l + "px";
        this.sSpan.style.top = t + "px";
        const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
        const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
        this.bImg.style.left = -x * (this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
        this.bImg.style.top = -y * (this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
    }
    init(){
        this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
        this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
    }
    addEvent(){
        const that = this;
        this.sBox.onmouseenter = function(){
            that.show();
        }
        this.sBox.onmouseleave = function(){
            that.hide();
        }
        this.sBox.onmousemove = function(eve){
            const e = eve || window.event;
            const pos = {
                x:e.offsetX,
                y:e.offsetY
            };
            that.move(pos);
        }
    }
    show(){
        this.sSpan.style.display = "block";
        this.bBox.style.display = "block";
        this.init();
    }
    hide(){
        this.sSpan.style.display = "none";
        this.bBox.style.display = "none";
    }
    }
    new Magnifier();









    // console.log(location.search).split("=")[1]
    const id = location.search.split("=")[1];

    ajax("http://localhost:3000/api",res=>{
        res = JSON.parse(res).msg;
        console.log(res);
        let i = 0;
        res.some((val,idx)=>{
            i = idx;
            return val.proId === id
        })
        console.log(res[i])
    
        $(".small_box>img").src = res[i].img;
        // 渲染大图
    
        $(".big_box>img").src = res[i].img;
        console.log(res[i].img)
        // 渲染图片列表
        let str = "";
        res[i].imgs.forEach(val=>{
            str += `<li><img src="${val}" alt=""></li>`
        })
        $(".magnifier").innerHTML = str;

        // 渲染标题
        $(".title_text").innerHTML = res[i].proName;
        // 渲染原价
        $("._price").innerHTML = "￥" + res[i].price;



    },
    {
        type:"getGoods"
    }
    )


    function $(s){
        return document.querySelector(s);
    }


    function ajax(url, callback, data){
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`
        }
        url += "?" + str;
        const xhr = new XMLHttpRequest();
        xhr.open("get",url)
        xhr.onload = function(){
            if(xhr.status === 200){
                callback(xhr.responseText)
            }
        }
        xhr.send();
    }










    // ==========



            // const addbox = document.querySelector(".add")
            // addbox.onclick = function (){
            //     console.log(id);
            // }
            // const goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];
            // console.log(goods);
            // if(goods.length < 1){
            //     goods.push({
            //         id:this.id,
            //         num:1
            //     })
            // }else{
            //     let i = 0;
            //     const flag = goods.some((val,idx)=>{
            //         i = idx;
            //         return val.id === this.id
            //     })
            //     if(flag){
            //         goods[i].num++;
            //     }else{
            //         goods.push({
            //             id:this.id,
            //             num:1
            //         })
            //     }
            // }
            
            // localStorage.setItem("goods", JSON.stringify(goods))
        





            class List{
                constructor(){
                    this.url = "http://localhost:3000/api";
                    this.add = document.querySelector(".add");
            
                    // this.load();
                    // 1. 绑定事件
                    this.addEvent();
                }
                addEvent(){
                    const that = this;
                    
                    // 利用事件委托，绑定添加购物车的点击事件
                    this.add.addEventListener('click',function(eve){
                        // console.log(id);
                        const e = eve || window.event;
                        const target = e.target || e.srcElement;
                        if(target.className === "add"){
                            // 2. 获取当前商品的id
                            that.id = id
                            // console.log(that.id);
                            that.setLocal();
                        }
                    })
                }
                setLocal(){
                    const goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];
                    // console.log(goods);
                    if(goods.length < 1){
                        // 第一次加入购物车：直接添加数据
                        goods.push({
                            id:this.id,
                            num:1
                        })
                    }else{
                        // 不是第一次加入购物车：
                        // 遍历
                        let i = 0;
                        const flag = goods.some((val,idx)=>{
                            i = idx;
                            return val.id === this.id
                        })
                        // 判断本次添加的是否是新商品
                        if(flag){
                            // 是老商品：增加指定商品的数量
                            goods[i].num++;
                        }else{
                            // 不是老商品：增加数据
                            goods.push({
                                id:this.id,
                                num:1
                            })
                        }
                    }
                    
                    // 再存回去
                    localStorage.setItem("goods", JSON.stringify(goods))
                }
                load(){
                    ajax({
                        url:this.url,
                        data:{
                            type:"getGoods"
                        },
                        success:res=>{
                            this.res = JSON.parse(res).msg;
                            // this.render();
                        }
                    })
                }
                // render(){
                //     let str = "";
                //     this.res.forEach(val=>{
                //         str += `<div class="box" index="${val.proId}">
                //                     <img src="${val.img}" alt="">
                //                     <p>${val.proName}</p>
                //                     <span>${val.price}</span>
                //                     <input type="button" class="add" value="加入购物车">
                //                 </div>`
                //     })
                //     this.cont.innerHTML = str;
                // }
            }
            
            new List();